<template>
  <el-table :data="tableData" border>
    <el-table-column 
      align="center" 
      v-for="item in tableCol" 
      :prop="item.prop" 
      :label="item.label" 
      :width="item.width" 
      :key="item.id"
    >
      <template slot-scope="scope">
        <div 
          class="cell-content" 
          v-tooltip-auto="getCellContent(scope.row, item)"
        >
          <template v-if="item.isSlot">
            <div class="multi-line-content">
              <div v-for="(v1, index) in scope.row.name" :key="index">{{ v1 }}</div>
            </div>
          </template>
          <template v-else>
            {{ scope.row[item.prop] }}
          </template>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "MyTable",
  directives: {
    tooltipAuto: {
      inserted(el, binding) {
        el.__fullContent = binding.value;

        // 1. 定义showTooltip和hideTooltip
        const showTooltip = (e) => {
          if (el.__tooltip) return;
          const tooltip = document.createElement('div');
          tooltip.className = 'el-tooltip__popper is-dark';
          tooltip.innerHTML = `
            <div class="popper__arrow"></div>
            <div class="popper__content">
              <div class="el-tooltip__content" role="tooltip">
                <div class="el-tooltip__text-wrapper">
                  <span class="el-tooltip__text">
                    ${Array.isArray(el.__fullContent) ? el.__fullContent.join('<br>') : el.__fullContent}
                  </span>
                </div>
              </div>
            </div>
          `;
          tooltip.style.cssText = `
            position: absolute;
            z-index: 2000;
            display: block;
            left: ${e.pageX + 10}px;
            top: ${e.pageY + 10}px;
            max-width: 200px;
          `;
          document.body.appendChild(tooltip);
          el.__tooltip = tooltip;
        };

        const hideTooltip = () => {
          if (el.__tooltip) {
            document.body.removeChild(el.__tooltip);
            el.__tooltip = null;
          }
        };

        // 2. 将函数挂载到el上，供unbind访问
        el.__showTooltip = showTooltip;
        el.__hideTooltip = hideTooltip;

        // 检查溢出
        const checkOverflow = () => {
          const isOverflow = el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;
          if (isOverflow) {
            el.addEventListener('mouseenter', showTooltip);
            el.addEventListener('mouseleave', hideTooltip);
          } else {
            el.removeEventListener('mouseenter', showTooltip);
            el.removeEventListener('mouseleave', hideTooltip);
            hideTooltip();
          }
        };

        checkOverflow();
        window.addEventListener('resize', checkOverflow);
        el.__checkOverflow = checkOverflow;
        el.__removeResize = () => window.removeEventListener('resize', checkOverflow);
      },
      update(el) {
        el.__checkOverflow();
      },
      unbind(el) {
        // 3. 通过el上的引用访问函数，避免作用域问题
        el.__removeResize();
        el.removeEventListener('mouseenter', el.__showTooltip);
        el.removeEventListener('mouseleave', el.__hideTooltip);
        el.__hideTooltip(); // 调用el上保存的hideTooltip
      }
    }
  },
  methods: {
    getCellContent(row, item) {
      return item.isSlot && Array.isArray(row[item.prop]) ? row[item.prop] : row[item.prop];
    }
  },
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: ['王小虎','王小虎','王小虎','王小虎','王小虎'], address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-04', name: ['王小虎','王小虎','王小虎','王小虎','王小虎','王小虎','王小虎','王小虎'], address: '上海市普陀区金沙江路 1517 弄' },
        { date: '2016-05-01', name: ['王小虎','王小虎','王小虎'], address: '上海市普陀区金沙江路 1519 弄' },
        { date: '2016-05-03', name: ['王小虎','王小虎','王小虎'], address: '上海市普陀区金沙江路 1516 弄' }
      ],
      tableCol: [
        { id: "000001", prop: "date", label: "日期", width: "120" },
        { id: "000002", prop: "name", label: "姓名", width: "180", isSlot: true },
        { id: "000003", prop: "address", label: "地址", width: "180" }
      ]
    };
  }
};
</script>

<style scoped>
.cell-content {
  width: 100%;
  padding: 0 4px;
  box-sizing: border-box;
  position: relative;
}
.multi-line-content {
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.cell-content:not(.multi-line-content) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

::v-deep .el-tooltip__popper {
  /* 继承Element样式 */
}
</style>